<template>
  <div class="vip">
    <Header></Header>
    <div class="vip2">
      <div>
        <img src="../assets/img/back/vip.png" style="width: 1200px" alt="">
      </div>
      <div class="vipcard-list" v-for="vipcard in vipcard_list" :key="vipcard.cardname">
        <div class="vip_card">
          <img :src="vipcard.img" alt="">
          <div class="vip3">
            <p>描述：{{ vipcard.content }}</p>

            <p>价格：{{ vipcard.price }}￥</p>
            <router-link :to="'/vip/detail/'+vipcard.id">
              <el-button type="primary" round>立即购买</el-button>
            </router-link>

          </div>

        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "Vip",
  data() {
    return {
      vipcard_id:0,
      vipcard_list: []
    }
  },
  components: {
    Header,
    Footer,

  },
  methods:{


  },
  created() {
    this.$http.get(`${this.$settings.base_url}vip/vipcard/`).then(res => {
      this.vipcard_list = res.data
      console.log(this.vipcard_list)
    })
  }
}
</script>

<style scoped>
.vip2 {
  width: 1200px;
  margin: 0 auto;
}

.vip3 {
  float: right;
  width: 300px;
  height: 180px;
  text-align: left;
  color: red;
}
.vip3 p{
  line-height: 50px;
}

.vipcard-list {
  width: 900px;
  height: 180px;
  margin: 5px auto;
  border-bottom: 1px #aaaaaa solid;
}
</style>